<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <el-button @click="goAdd">新增</el-button>
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i class="iconfont icon-zhankai" :class="{active: searchshow === true}" style="font-size: 12px"></i></el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>说明</span>
          <el-input
                  placeholder="请输入"
                  size="mini"
                  prefix-icon="el-icon-search"
                  v-model="searchmsg.title">
          </el-input>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              label="ID"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="KEY"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.alias }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="值"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="说明"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
              label="简介"
              width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.intro }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog
              title="新增"
              :visible.sync="dialogVisible"
              width="30%">
        <div class="dialog-one">
          <div class="name">KEY</div>
          <div class="inp">
            <el-input v-model="alias" placeholder="请输入配置的key"></el-input>
          </div>
        </div>
        <div class="dialog-one">
          <div class="name">值</div>
          <div class="inp">
            <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入配置的值"
                    v-model="value">
            </el-input>
          </div>
        </div>
        <div class="dialog-one">
          <div class="name">说明</div>
          <div class="inp">
            <el-input v-model="title" placeholder="请输入标题"></el-input>
          </div>
        </div>
        <div class="dialog-one">
          <div class="name">简介</div>
          <div class="inp">
            <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入简介"
                    v-model="intro">
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import msgbox from '../../common/msgbox.js'
  import config from '../../common/config'
  import MsgList from '../public/msgList'
  import editor from '../../assets/editor/editor'
  import ImgUpload from '../public/imgUpload'
  let { TcPlayer } = require('../../common/TcPlayer-module-2.2.1')

  export default {
    components: {
      ImgUpload,
      MsgList,
      editor: editor},
    name: 'questions',
    data () {
      return {
        searchshow: false,
        searchmsg: {
          title: ''
        },
        id: 0,
        title: '',
        intro: '',
        alias: '',
        value: '',
        tableData: [],
        dialogVisible: false
      }
    },
    mounted () {
      this.search()
    },
    methods: {
      search () { // 搜索获取数据
        console.log(this.searchmsg)
        let that = this
        this.$g.ajax({
          path: 'sysConfigs/getList',
          method: 'post',
          data: {
            title: that.searchmsg.title
          },
          cbSuccess: function (data) {
            that.tableData = data.memo
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      },
      goAdd () {
        this.id = 0
        this.dialogVisible = true
      },
      add () {
        let that = this
        if (this.id === 0) {
          that.$g.ajax({
            path: 'sysConfigs/add',
            method: 'post',
            data: {
              title: that.title,
              intro: that.intro,
              alias: that.alias,
              value: that.value,
            },
            cbSuccess: function (data) {
              that.$message.success('新增成功')
              that.dialogVisible = false
              that.searchmsg.title = ''
              that.title = ''
              that.intro = ''
              that.alias = ''
              that.value = ''
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        } else {
          that.$g.ajax({
            path: 'sysConfigs/update',
            method: 'post',
            data: {
              id: that.id,
              title: that.title,
              intro: that.intro,
              alias: that.alias,
              value: that.value,
            },
            cbSuccess: function (data) {
              that.$message.success('修改成功')
              that.dialogVisible = false
              that.searchmsg.title = ''
              that.title = ''
              that.intro = ''
              that.alias = ''
              that.value = ''
              that.search()
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      },
      handleEdit (index, row) {
        console.log(index, row)
        this.id = row.id
        let that = this
        this.$g.ajax({
          path: 'sysConfigs/getInfo',
          method: 'post',
          data: {
            id: row.id
          },
          cbSuccess: function (data) {
            that.title = data.memo.title
            that.intro = data.memo.intro
            that.alias = data.memo.alias
            that.value = data.memo.value
            that.dialogVisible = true
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      },
      handleDelete (index, row) {
        console.log(index, row)
        let that = this
        this.$confirm('是否删除该选项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$g.ajax({
            path: 'sysConfigs/delete',
            method: 'post',
            data: {
              id: row.id
            },
            cbSuccess: function (data) {
              that.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.tableData.splice(index, 1)
            },
            cbError: function (data) {
              let msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #videolist {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .dialog-one{
      display: flex;
      margin-bottom: 14px;
      .name{
        width: 100px;
        line-height: 40px;
      }
      .inp{
        width: 400px;
      }
    }
  }
</style>
<style>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  #videolist .el-textarea__inner {
    resize: none;
  }
</style>
